﻿<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />



    <link rel="stylesheet" href="../content/css/font.css">
    <link rel="stylesheet" href="../content/css/xadmin.css">
    <link rel="stylesheet" href="../content/plugin/bootstrap/css/bootstrap.min.css">
    <link rel='stylesheet' href='../content/plugin/bootstrap/css/style.css' />

    <script src="../content/js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" src="../content/js/xadmin.js"></script>
    <script type="text/javascript" src="../content/js/cookie.js"></script>
    <script src="../content/lib/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../content/plugin/FileUpload/css/jquery.fileupload.css" />




</head>

<body>
    <div id="app">
        <div class="x-nav">

            <span class="nav-header">
                <a href="">首页</a>>
                <a href="">进销存</a>> 销售

            </span>

        </div>
        <div class="x-body">
            <div class="layui-row">

                <input type="text" name="username" placeholder="订单号" v-model="search.name" autocomplete="off"
                    style="height:30px;width: 100px;">

                <button class="layui-btn" v-on:click="searchdata"><i class="layui-icon">&#xe615;</i></button>


            </div>
            <hr />
            <div>

                <button class="layui-btn" v-on:click="add"><i class="layui-icon"></i>添加</button>

                <button class="layui-btn" v-on:click="add">导入模板</button>

                <button class="layui-btn" v-on:click="add">导入</button>

                <button class="layui-btn" v-on:click="add">导出</button>

            </div>
            <br />

            <div class="table-responsive">
                <table class="table table-bordered table-hover">

                    <thead>
                        <tr>

                            <th>销售单号</th>
                            <th>用户名</th>
                            <th>昵称</th>
                            <th>收货人电话</th>
                            <th>销售日期</th>
                            <th>订单总额</th>
                            <th>支付方式</th>
                            <th>备注</th>
                            <th>操作</th>

                        </tr>
                    </thead>
                    <tbody>
                        <template v-for="uitem in arrayData">

                            <tr v-cloak>

                                <td>{{uitem.ordernum}}</td>

                                <td>{{uitem.username}}</td>
                                <td>{{uitem.truename}}</td>
                                <td>{{uitem.phone}}</td>
                                <td>{{uitem.createtime}}</td>
                                <td>{{uitem.summoney}}</td>


                                <td>{{uitem.paytype1}}</td>

                                <td>{{uitem.descs}}</td>

                                <td class="td-manage">

                                    <a title="删除" v-on:click="vdel(uitem)" href="javascript:;">
                                        <i class="layui-icon">&#xe640;</i>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="9">
                                    <table class="table">
                                        <tr style="background-color: beige;">
                                            <td>商品编号</td>
                                            <td>物品名称</td>
                                            <td>日文名称</td>
                                            <td>数量</td>
                                            <td>价格</td>
                                            <td>备注</td>
                                        </tr>
                                        <tr v-for="a in uitem.content">
                                            <td>
                                                {{a.code}}
                                            </td>
                                            <td>
                                                {{a.name}}
                                            </td>
                                            <td>
                                                {{a.name_japan}}
                                            </td>

                                            <td>
                                                {{a.num}}
                                            </td>
                                            <td>
                                                {{a.xsprice}}
                                            </td>
                                            <td>
                                                {{a.descs}}
                                            </td>



                                        </tr>


                                    </table>
                                </td>
                            </tr>

                        </template>


                    </tbody>
                </table>
            </div>
            <div class="page">
                <div>
                    <vue-nav :cur="search.page" :all="all" :allcount="allcount" :callback="callback"></vue-nav>
                </div>
            </div>

        </div>




        <div class="modal fade" id="addbox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" style="width:80%">
                <div class="modal-content" id="myModal">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">新增销售</h4>
                    </div>
                    <div class="modal-body">
                        <form action="" v-on:submit.prevent="insert">
                            <fieldset>

                                <div class="control-group">
                                    单号： <label>{{addobj.ordernum}}</label>
                                    <br />
                                    <div style="margin-top: 10px;">
                                        用户名：
                                        <input placeholder="" type="text" style="height: 35px;width:140px;"
                                            v-model="addobj.username">

                                        收件人姓名：
                                        <input placeholder="" type="text" style="height: 35px;width:140px;"
                                            v-model="addobj.truename">
                                        收件人电话：
                                        <input placeholder="" type="text" style="height: 35px;width:140px;"
                                            v-model="addobj.phone">
                                        微信昵称：
                                        <input placeholder="" type="text" style="height: 35px;width:140px;"
                                            v-model="addobj.weixin">

                                    </div>
                                    <br />
                                    <div style="margin-top: 10px;">


                                        支付方式：
                                        <input placeholder="" type="text" style="height: 35px;width:140px;"
                                            v-model="addobj.paytype1">

                                        备注：
                                        <input placeholder="" type="text" style="height: 35px;width:140px;"
                                            v-model="addobj.descs">
                                    </div>

                                </div>
                                <p>
                                    <button type="button" class="btn btn-default" v-on:click="choose">选择</button>
                                </p>
                                <div style="height: 350px;overflow:scroll;">
                                    <table class="layui-table">
                                        <thead>
                                            <tr>

                                                <th>序号</th>
                                                <th>操作</th>
                                                <th style="width: 120px;">商品编号</th>
                                                <th>物品名称</th>
                                                <th style="width: 200px;">日文名称</th>
                                                <th>型号规格</th>
                                                <th>数量</th>
                                                <th>库存</th>
                                                <th>价格</th>
                                                <th>金额</th>
                                                <th>备注</th>

                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="(uitem,index)  in chooseitem" :key="index">
                                                <td>
                                                    {{index+1}}
                                                </td>
                                                <td class="td-manage">
                                                    <a title="编辑" v-on:click="delitem(uitem)" href="javascript:;">
                                                        删除
                                                    </a>

                                                </td>
                                                <td>{{uitem.code}}</td>
                                                <td>{{uitem.name}}</td>
                                                <td>{{uitem.name_japan}}</td>
                                                <td>{{uitem.format}}</td>

                                                <td>
                                                    <input type="number" @input="changeFunc(uitem)" v-model="uitem.num"
                                                        style="width:50px;" />
                                                </td>
                                                <td>{{uitem.kucun}}</td>
                                                <td>
                                                    {{uitem.xsprice}}
                                                </td>
                                                <td>
                                                    {{uitem.sum}}
                                                </td>
                                                <td>
                                                    <input type="text" v-model="uitem.descs"   />
                                                </td>

                                            </tr>
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <td>合计</td>
                                                <td colspan="12">{{sum}} 元</td>
                                            </tr>
                                        </tfoot>

                                    </table>
                                </div>




                            </fieldset>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="submit" class="btn btn-primary">确定</button>

                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- 充值 -->
        <div class="modal fade" id="goodsbox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" style="width:1200px">
                <div class="modal-content" id="myModal">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">选择商品</h4>
                    </div>
                    <div class="modal-body">
                        <fieldset>

                            <div class="col-md-12">
                                <div style="    height: 30px;">
                                    <div style="float: left">
                                        物品名称：
                                        <input type="text" v-model="goodsearch.name" placeholder="" autocomplete="off"
                                            style="height:30px;width: 100px;">
                                            编号：
                                            <input type="text" v-model="goodsearch.code" placeholder="" autocomplete="off"
                                                style="height:30px;width: 100px;">


                                        <button class="layui-btn" v-on:click="getproduct"><i
                                                class="layui-icon">&#xe615;</i></button>
                                    </div>

                                </div>

                                <table class="layui-table" style="margin-top:10px;">
                                    <thead>
                                        <tr>

                                            <th style="width: 120px;">商品条码</th>
                                            <th>中文品名</th>
                                            <th style="width: 200px;">日文品名</th>
                                            <th>英文名</th>
                                            <th>规格</th>

                                            <th>商品重量g</th>

                                            <th>库存</th>



                                            <th>操作</th>

                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="uitem in productlist">

                                            <td>{{uitem.code}}</td>
                                            <td>{{uitem.name}}</td>
                                            <td>{{uitem.name_japan}}</td>
                                            <td>{{uitem.name_english}}</td>
                                            <td>{{uitem.format}}</td>
                                            <td>{{uitem.weight}}</td>

                                            <td>{{uitem.kucun}}</td>


                                            <td class="td-manage">
                                                <a title="编辑" v-on:click="additem(uitem)" href="javascript:;">
                                                    选择
                                                </a>

                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="page">
                                    <div>
                                        <vue-nav :cur="goodsearch.page" :all="goodsearch.all"
                                            :allcount="goodsearch.allcount" :callback="goodcallback"></vue-nav>
                                    </div>
                                </div>

                            </div>
                    </div>
                </div>



                </fieldset>

            </div>
        </div>




    </div>
    <link href="../content/plugin/sweetalert/sweetalert.css" rel="stylesheet">
    <script src="../content/plugin/sweetalert/sweetalert.min.js"></script>
    <script src="../content/plugin/bootstrap/js/bootstrap.min.js"></script>
    <script src="../content/js/vue2.js"></script>
    <script src="../content/js/vue-nav.js"></script>
    <script src="../content/js/config.js"></script>

    <script>


        Array.prototype.remove = function (val) {
            var index = this.indexOf(val);
            if (index > -1) {
                this.splice(index, 1);
            }
        };
        var vm = new Vue({
            el: "#app",
            data: {
                all: 0,
                search: {
                    page: 1,
                    size: 10,
                    outin: 1
                },
                arrayData: [],
                allcount: 0,
                menulist: [],
                addobj: {
                    parentid: 0
                },
                info: {},
                editobj: {},
                datalist: [],
                chooseitem: [],
                statelist: [{ "id": 1, "name": "是" }, { "id": 0, "name": "否" }],
                sum: 0,
                goodsearch: {
                    page: 1, rows: 10,
                    all: 0,
                    allcount: 0,
                    kucun: 1
                },
                supplierlist: [],
                productlist: [],
                userlist: [],
                state: 0
            },
            components: {
                'vue-nav': Vnav
            },
            watch: {
                chooseitem(curVal, oldVal) {
                    // 实现input连续输入，只发一次请求
                    console.log(curVal);
                }
            },
            methods: {
                wuliu: function (uitem) {
                    this.info = uitem;
                    $("#configbox").modal('show');

                },

                searchdata: function () {
                    this.search.page = 1;
                    this.getdata();
                },

                add: function () {
                    this.state = 1;
                    this.addobj = { ordernum: "XS" + new Date().valueOf() };
                    $("#addbox").modal('show');
                },
                addhang: function () {
                    if (this.datalist == null) {
                        this.datalist = [];
                    }
                    console.log("addhang", this.datalist);
                    var datalist = this.datalist;
                    datalist.push({});
                    this.datalist = datalist;
                },
                delcode: function (uitem) {
                    var datalist = this.datalist;
                    datalist.remove(uitem);
                    this.datalist = datalist;
                },
                getdata: function (_keycontent) {  //查询数据

                    var self = this;
                    $.post(apiurl + "/admin/jxc/productwork/list", this.search, function (_result) {
                        console.log(_result);
                        self.arrayData = _result.data;
                        var list = _result.data;
                        for (var i = 0; i < list.length; i++) {
                            list[i].content = JSON.parse(list[i].content);

                        }
                        self.all = _result.allcount;
                        self.allcount = _result.count;
                    });

                },
                callback: function (data) {
                    var self = this;
                    this.search.page = data;
                    $.post(apiurl + "/admin/jxc/productwork/list", this.search, function (_result) {
                        self.arrayData = _result.data;
                        var list = _result.data;
                        for (var i = 0; i < list.length; i++) {
                            list[i].content = JSON.parse(list[i].content);

                        }
                        self.all = _result.allcount;
                        self.allcount = _result.count;
                    });
                },
                vupdate: function (uitem) {

                    this.editobj = uitem;
                    console.log("haoqig", uitem);
                    $("#editbox").modal('show');

                },
                update: function () {
                    var self = this;

                    $.post(apiurl + "/admin/jxc/supplier/edit", this.editobj, function (data) {
                        if (data.status == 200) {
                            $("#editbox").modal('hide');
                            swal("success", "修改成功", "success");
                            self.getdata("");
                        } else {
                            swal("系统提示", data.message, "error");
                        }
                    });

                },
                vdel: function (uitem) {
                    var self = this;
                    swal({
                        title: "确定要删除吗?",
                        text: "",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "是",
                        cancelButtonText: '否',
                        closeOnConfirm: false
                    }, function () {

                        $.ajax({
                            url: apiurl + '/admin/jxc/productwork/del',
                            type: 'DELETE',
                            data: { "ids": uitem.id },
                            success: function (result) {
                                if (result.status == 200) {
                                    swal("系统提示", "已删除", "success");
                                    self.getdata("");
                                } else {
                                    swal("系统提示", "系统异常", "success");
                                }
                            }
                        });

                    });
                },
                choose: function () {
                    this.getproduct();
                    // this.getuserlist();
                    // loadtree();
                    $("#goodsbox").modal('show');

                },
                getproduct: function () {  //查询数据

                    var self = this;

                    $.post(apiurl + "/admin/jxc/productgood/list", this.goodsearch, function (_result) {
                        console.log(_result);
                        self.productlist = _result.data;
                        self.goodsearch.all = _result.allcount;
                        self.goodsearch.allcount = _result.count;

                    });
                },
                goodcallback: function (data) {
                    var self = this;
                    this.goodsearch.page = data;
                    $.post(apiurl + "/admin/jxc/productgood/list", self.goodsearch, function (_result) {
                        self.productlist = _result.data;
                        self.goodsearch.all = _result.allcount;
                        self.goodsearch.allcount = _result.count;
                    });
                },
                additem: function (uitem) {
                    console.log("aa");
                    var b = false;
                    for (var i = 0; i < this.chooseitem.length; i++) {
                        if (this.chooseitem[i].id == uitem.id) {
                            this.chooseitem[i].num = this.chooseitem[i].num + 1;

                            b = true;
                            break;
                        }
                    }
                    if (b == false) {
                        uitem.num = 1;
                        uitem.sum = uitem.num * uitem.xsprice;
                        this.chooseitem.push(uitem);
                    } else {

                    }
                    var sum = 0;
                    this.chooseitem.forEach(v => {
                        sum += v.xsprice * v.num;
                    });
                    this.sum = sum;
                    console.log(this.chooseitem);
                    layer.msg("操作成功");
                    this.$forceUpdate();
                    // $("#goodsbox").modal('hide');

                },
                delitem: function (uitem) {
                    this.chooseitem.remove(uitem);
                    var sum = 0;
                    this.chooseitem.forEach(v => {
                        sum += v.price * v.num;
                    });
                    this.sum = sum;
                },
                changeFunc: function (uitem) {

                    if (uitem.num > uitem.kucun) {

                        layer.msg("不能大于库存")
                        uitem.num = 0;

                    } else if (parseInt(uitem.num) >= 1) {
                        var sum = 0;
                        this.chooseitem.forEach(v => {
                            sum += v.xsprice * v.num;
                        });
                        uitem.sum = uitem.xsprice * uitem.num;
                        this.sum = sum;
                        this.$forceUpdate();
                        console.log(uitem);
                    } else {
                        uitem.num = 1;
                    }


                },
                getsupplier() {
                    var self = this;

                    $.post(apiurl + "/admin/jxc/supplier/list", { page: 1, rows: 999 }, function (_result) {
                        console.log(_result);
                        self.supplierlist = _result.data;

                    });
                },
                insert: function () {
                    var self = this;

                    var num = 0;
                    var summoney = 0;
                    if (this.chooseitem.length == 0) {

                        layer.msg("请选择产品")
                        return;
                    }
                    for (var i = 0; i < this.chooseitem.length; i++) {
                        num = num + this.chooseitem[i].num;
                        summoney = summoney + this.chooseitem[i].sum;
                    }
                    var gids = JSON.stringify(this.chooseitem);
                    this.addobj.content = gids;
                    this.addobj.num = num;
                    this.addobj.summoney = summoney;
                    this.addobj.state = 0;
                    this.addobj.outin = 1;

                    $.post(apiurl + "/admin/jxc/productwork/add", this.addobj, function (data) {
                        if (data.status == 200) {
                            $("#addbox").modal('hide');
                            self.chooseitem =[]
                            swal("success", "提交成功", "success");
                            self.getdata("");
                        } else {
                            swal("系统提示", data.message, "error");
                        }

                    });

                },
                getgoodsbycode: function (code) {
                    var that = this;
                    // code = code.split(",")[1];
                    $.post(apiurl + "/admin/jxc/productgood/find", { code: code }, function (data) {
                        console.log("data", data);
                        if (data.status == 200) {
                            if (data.data.kucun == 0) {
                                layer.msg("没有库存");
                            } else {
                                that.additem(data.data);
                            }

                        } else {
                            swal("系统提示", data.message, "error");
                        }

                    });
                }


            },
            created: function () {  //初始化事件里边去调用查询方法
                this.getdata("");
                this.getsupplier();



            }
        });

        window.onload = function () {
            console.log("!!!!");
            var code = "";
            var lastTime, nextTime;
            var lastCode, nextCode;

            document.onkeypress = function (e) {

                nextCode = e.which;
                nextTime = new Date().getTime();

                if (lastCode != null && lastTime != null && nextTime - lastTime <= 30) {
                    code += String.fromCharCode(lastCode);
                } else if (lastCode != null && lastTime != null && nextTime - lastTime > 100) {
                    code = "";
                }

                lastCode = nextCode;
                lastTime = nextTime;
            }

            this.onkeypress = function (e) {

                console.log("e", e.which);
                if (e.which == 13) {
                    console.log("进来了", code);
                    if (vm.$data.state == 1) {
                        vm.getgoodsbycode(code);
                        code = "";
                    }

                }
            }
        }
    </script>
</body>

</html>